<template>
<div id="topo">
  <div class="viewBlock">
    <div id="topo-toolbar" class="toolBar clear">
      <!-- 工具栏 -->
      <toolbarComp></toolbarComp>
      <topoToolbarComp></topoToolbarComp>
    </div>
  </div>
  <!-- 拓扑图  -->
  <topoGraphComp></topoGraphComp>
  <!-- 右键菜单 -->
  <topoContextMenuComp></topoContextMenuComp>
  <!-- 拓扑图上的事件组件 -->
  <topoElementEventComp></topoElementEventComp>
  <!-- 拓扑图上的元素详情组件 -->
  <topoElementDetailComp></topoElementDetailComp>
</div>
</template>
<script>
import topoApi from 'api/topo'
import {TOPO_BTN_COMMON,TOPO_BTN_BUS} from 'common/topo/toolbarBtn'

import toolbarComp from 'components/topo/toolbar.vue'
import topoToolbarComp from './topoToolbar.vue'
import topoContextMenuComp from './topoContextMenu.vue'
import topoGraphComp from 'views/topo/topoGraph.vue'
import topoElementEventComp from './rightView/topoElementEvent.vue'
import topoElementDetailComp from './rightView/topoElementDetail.vue'


export default {
  data() {
    return {
    }
  },
  components: {
    toolbarComp, topoToolbarComp, topoGraphComp, topoContextMenuComp,topoElementEventComp,topoElementDetailComp
  },
  mounted() {
    this.initSysIcons();
    this.initExchangerHostData();
  },
  methods: {
    initSysIcons() {
      const self = this;

      this.$store.dispatch('getSysIcons').then((response) => {
      }).catch(err => {
        // self.$message({type: 'error', message: self.$t('get icons failed') + ', ' + err});
      });
    },
    initExchangerHostData() {
      const self = this;

      this.$store.dispatch('getExchangerInterfaceData').then((response) => {
      }).catch(err => {
        // self.$message({type: 'error', message: self.$t('get interface failed') + ', ' + err});
      });

      this.$store.dispatch('getExchangerHostData').then((response) => {
      }).catch(err => {
        // self.$message({type: 'error', message: self.$t('get interface failed') + ', ' + err});
      });


    }
  }
}
</script>

<style>
  #topo {
    height: 90vh; /* 屏幕宽度 */
    width: 100vw; /* 屏幕高度 */
  }
</style>

